@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // --page-bg: #ffffff;
}

/* 优化字体加载 - 使用font-display: swap避免FOIT */
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: local('Poppins');
}

@font-face {
  font-family: 'Noto Sans';
  font-display: swap;
  src: local('Noto Sans');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-display: swap;
  src: local('Noto Sans JP');
}

/* 按语言切换字体：
   - en 使用 Poppins
   - es/fr/ru 使用 Noto Sans
   - ja 使用 Noto Sans JP
   优化：添加系统字体回退，减少字体加载阻塞
*/
[data-locale="en"] {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

[data-locale="es"],
[data-locale="fr"],
[data-locale="ru"] {
  font-family: 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

[data-locale="ja"] {
  font-family: 'Noto Sans JP', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

/* 关键CSS - 首屏渲染优化 */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 优化链接样式 */
a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}

a:hover {
  color: #535bf2;
}

/* 重置样式 */
*,
html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow: auto;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  background-color: var(--page-bg);
}


@media (max-width: 768px) {

  html,
  body {
    overscroll-behavior-y: none;
    margin: 0;
    padding: 0;
  }

  /* 移动端统一缩小根字体，以使所有使用 rem 的字体在移动端呈现为 0.9rem 大小 */
  html {
    margin: 0;
    padding: 0;
    font-size: 90%;
    /* 16px * 0.9 = 14.4px，相当于将原来的 1rem 缩小为 0.9rem */
  }
}

@keyframes highlightPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.7);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(236, 72, 153, 0.3);
    transform: scale(1.02);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);
    transform: scale(1);
  }
}

/* 隐藏滚动条工具类（PC端） */
@media (min-width: 1024px) {
  .scrollbar-hide {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Webkit */
  }
}

/* 自定义滚动条样式 - 主题样式 */
.custom-scrollbar {
  /* Firefox 滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: #ec4899 rgba(40, 40, 40, 0.3);
}

/* Webkit 浏览器滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(40, 40, 40, 0.3);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #ec4899;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #d946aa;
}

/* 细滚动条变体 */
.custom-scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #ec4899 transparent;
}

.custom-scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar-thin::-webkit-scrollbar-thumb {
  background: #ec4899;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.custom-scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #d946aa;
}

/* 移动端优化 - 更细的滚动条 */
@media (max-width: 768px) {
  .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .custom-scrollbar-thin::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
}



/* PhoneInput 样式覆盖 - 使用更强的选择器 */
/* 下拉框容器背景 */
.react-phone-input-2 .country-list,
.react-phone-input-2__country-list {
  background: rgb(33, 37, 41) !important;
  color: white !important;
}

/* 搜索框样式 - 多种可能的class名 */
.react-phone-input-2 .search-box,
.react-phone-input-2__search-box,
.react-phone-input-2 .country-list .search-box,
.react-phone-input-2 input[type="search"] {
  background: red !important;
  color: white !important;
  border: 1px solid white !important;
  border-radius: 0.5rem !important;
}

.react-phone-input-2 .search-box:focus,
.react-phone-input-2__search-box:focus,
.react-phone-input-2 input[type="search"]:focus {
  background: red !important;
  color: white !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5) !important;
}

/* 下拉项默认样式 - 多种选择器 */
.react-phone-input-2 .country-list .country,
.react-phone-input-2__country-list .react-phone-input-2__country,
.react-phone-input-2 .country,
li[data-country-code] {
  background: rgb(33, 37, 41) !important;
  color: white !important;
}

/* 鼠标悬停和高亮选中的项 - 多种状态 */
.react-phone-input-2 .country-list .country:hover,
.react-phone-input-2 .country-list .country.highlight,
.react-phone-input-2 .country-list .country:focus,
.react-phone-input-2__country-list .react-phone-input-2__country:hover,
.react-phone-input-2__country-list .react-phone-input-2__country.react-phone-input-2__highlight,
.react-phone-input-2 .country:hover,
li[data-country-code]:hover,
li[data-country-code].highlight {
  background: rgb(31, 35, 39) !important;
  color: white !important;
}

/* 搜索结果为空时的提示 */
.react-phone-input-2 .no-entries-message,
.react-phone-input-2__no-entries-message {
  background: rgb(33, 37, 41) !important;
  color: white !important;
}

/* 额外的强制覆盖 - 适用于所有可能的结构 */
div[class*="country-list"] {
  background: rgb(33, 37, 41) !important;
}

div[class*="country-list"] input {
  background: red !important;
  color: white !important;
}

div[class*="country-list"] li:hover,
div[class*="country-list"] li.highlight {
  background: red !important;
  color: white !important;
}

/* 最强有力的覆盖 - 针对所有可能的PhoneInput内部元素 */
.react-phone-input-2 * {
  box-sizing: border-box;
}

/* 通用搜索框覆盖 */
.react-phone-input-2 input[placeholder*="Search"],
.react-phone-input-2 input[placeholder*="search"],
.react-phone-input-2 input[class*="search"] {
  background: red !important;
  color: white !important;
  border: 1px solid white !important;
}

/* 通用列表项覆盖 */
.react-phone-input-2 ul li:hover,
.react-phone-input-2 ul li[class*="highlight"],
.react-phone-input-2 ul li:focus {
  background: red !important;
  color: white !important;
}

.selected-flag {
  background-color: rgb(28, 25, 23) !important;
  border-radius: 1rem !important;
}

.search {
  background-color: rgb(33, 37, 41) !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;

  .search-emoji {
    display: none !important;
  }

  .search-box {
    width: 90% !important;
    background-color: rgb(33, 37, 41) !important;
    border: none !important;
  }
}

.flag-dropdown {
  border-radius: 0.7rem 0 0 0.7rem !important;
}

/* 主题感知滚动条样式（全局） */
:root {
  --scrollbar-track: rgba(40, 40, 40, 0.15);
  --scrollbar-thumb: rgba(236, 72, 153, 0.9);
  --scrollbar-thumb-hover: rgba(217, 70, 138, 0.95);
  --scrollbar-size: 10px;
  --page-bg: #ffffff;
}

/* 支持 Tailwind 或者手动切换 dark class / data-theme */
.dark,
[data-theme="dark"] {
  --scrollbar-track: rgba(255, 255, 255, 0.03);
  --scrollbar-thumb: rgba(255, 255, 255, 0.06);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.12);
  --page-bg: #111111;
}

[data-theme="light"] {
  --scrollbar-track: rgba(0, 0, 0, 0.06);
  --scrollbar-thumb: rgba(0, 0, 0, 0.18);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.28);
  --page-bg: #ffffff;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit */
*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 160ms ease;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* 更细的变体，适用于 modal / 列表 */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
}

@media (max-width: 768px) {
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
}

/* CTA 动效与光晕（主题对齐，性能友好） */
@keyframes ctaSoftPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.35);
  }

  50% {
    transform: scale(1.015);
    box-shadow: 0 0 0 12px rgba(236, 72, 153, 0.08);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);
  }
}

@keyframes ctaFloatY {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0);
  }
}

.cta-pulse {
  animation: ctaSoftPulse 2.6s ease-in-out infinite;
  will-change: transform, box-shadow;
}

.cta-float {
  animation: ctaFloatY 3.6s ease-in-out infinite;
  will-change: transform;
}

.cta-glow {
  position: relative;
}

.cta-glow::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 50%, rgba(236, 72, 153, 0.35), rgba(236, 72, 153, 0) 60%);
  filter: blur(14px);
  z-index: -1;
  pointer-events: none;
  animation: ctaSoftPulse 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

  .cta-pulse,
  .cta-float,
  .cta-glow::after {
    animation: none !important;
  }
}

/* Viewport height fallbacks for instant first paint */
:root {
  /* Default to small/dynamic viewport units; JS will override via --app-vh */
  --app-vh: 100svh;
  /* Header and tabbar default heights (will be overridden by JS) */
  --header-h: 60px;
  --tabbar-h: 56px;
  /* Content height = viewport - header - tabbar - safe area */
  --content-h: calc(var(--app-vh, 100vh) - var(--header-h, 0px) - var(--tabbar-h, 0px) - env(safe-area-inset-bottom));
}

/* iOS特殊处理：确保在iOS设备上正确处理安全区域 */
@supports (padding: max(0px)) {
  :root {
    --content-h: calc(var(--app-vh, 100vh) - var(--header-h, 0px) - var(--tabbar-h, 0px) - max(env(safe-area-inset-bottom), 0px));
  }
}

@media (min-width: 640px) {
  :root {
    /* No mobile tab bar on sm and above */
    --tabbar-h: 0px;
  }
}

@media (min-width: 768px) {
  :root {
    /* md header height equals 56px */
    --header-h: 56px;
  }
}